<template>
	<view :style="{'--color':color}" class="Content">
		<!-- #ifdef MP-WEIXIN -->
		<navBar :bgMake="5" :Color="2" :title="title"></navBar>
		<!-- #endif -->
		<block v-for="(item,index) in pageData" :key="index">
			<view class="UploadBox" @click="UploadImg(index)" v-if="item.vpType == 7">
				<view class="upload flexac">
					<image :src="$imgUrls(item.value)" mode="aspectFill" class="wh" v-if="item.value"></image>
					<view class="iconfont icon-tianjia color_f2" v-else></view>
				</view>
				<view class="uploadBtn">上传头像</view>
			</view>
		</block>
		<view class="flex-1 d-flex a-end p-bot100">
			<view class="Btns" @click="Continue">提交上传</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				headImg: '',
				pageData: [],
			}
		},
		onShow() {
			this.user_base_info();
		},
		methods: {
			user_base_info() {
				this.$http.get({
					url: '/WeddingApi/user_base_info',
					data: {
						times: 2
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data.list || [];
					this.pageData = result;
					console.log(this.pageData);
				})
			},
			Continue() {
				let that = this;
				for (var item of that.pageData) {
					if (item.bixu == 1 && !item.value) return that.$Toast(`${item.vpName}不能为空！`)
				}
				that.$http.post({
					url: '/WeddingApi/edit_base_info',
					data: {
						property: JSON.stringify(that.pageData)
					}
				}).then(res => {
					if (res.code != 200) return that.$Toast(res.msg);
					this.toUrl(`DataOne?procedure=1`);
				})
			},


			UploadImg(index) {
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						const tempFilePaths = res.tempFilePaths[0];
						// #ifdef MP-WEIXIN
						wx.cropImage({
							src: tempFilePaths,
							cropScale: '1:1',
							success(res2) {
								that.uploadFile(res2.tempFilePath, index);
							},
						})
						// #endif
						// #ifdef H5
						that.uploadFile(tempFilePaths, index, index);
						// #endif
					},
				})
			},

			uploadFile(tempFilePath, index) {
				this.$common.uploadFile(tempFilePath).then(res => {
					this.pageData[index].value = res.url.substring(22, res.url.length);
				})
			},

		},
		computed: {
			...mapState(['color', 'title'])
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.Content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.UploadBox {
		width: 420rpx;
		box-sizing: border-box;
		margin-top: 100rpx;
	}

	.upload {
		width: 100%;
		height: 400rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.uploadBtn {
		width: 400rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1rpx solid var(--color);
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--color);
		margin: 40rpx auto 0 auto;
	}

	.icon-tianjia {
		font-size: 150rpx;
	}

	.Btns {
		width: 560rpx;
		height: 80rpx;
		background-color: var(--color);
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 34rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>